﻿@model IEnumerable<rateITcd.Models.Restaurant>

@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaqPMzWGSUhKcTrWf4cx-W-KLQFV1t4Zw"></script>
<script type="text/javascript">
    function initialize() {

        var myStyles =[
        {
            featureType: "poi",
            elementType: "labels",
            stylers: [
                  { visibility: "off" }
            ]
        }
            ];

        var mapOptions = {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8,
            styles: myStyles
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var mybounds = new google.maps.LatLngBounds();


        function addMarker(latitude, longitude, title, id) {
            // LOOP
            var myLatlng = new google.maps.LatLng(latitude, longitude);
            var contentString = '<div id="content" style="width: 120px;">'+
                 '<h5>'+title+'</h5>' +
                 '<div id="bodyContent"><a href="/Restaurant/Details/'+id+'" class="btn btn-primary btn-xs" data-i18n="View">Bekijken</div>' +
                 '</div>' +
                 '</div>';

            var infowindow = new google.maps.InfoWindow({ content:  contentString });

            var marker = new google.maps.Marker({
                position: myLatlng,
                animation: google.maps.Animation.DROP,
                title: "Hello World!"
            });
            google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker);  });

            mybounds.extend(marker.getPosition());
            marker.setMap(map);
            //END LOOP
        }
         @foreach (var item in Model) {
            @:addMarker(@item.Latitude, @item.Longtitude, '@item.Name', '@item.Id');
         }
        map.fitBounds(mybounds);

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width:100%; height:550px; "></div>
